<template>
  <div class="analysis">
    <!-- 头部 -->
    <topContainer @getId='getId' :name='topName'></topContainer>

    <div class="boardContainer">
      
    </div>
  </div>
</template>

<script>
  import {
    lampDashboard
  } from '@/api/lampController'
  export default {
    data() {
      return {
        topName:'联络灯效率分析',
        timer:null,
        lampDashboardList:[]
      }
    },
    methods:{
      //分组id
      getId(groupId) {
        this.loop(groupId)
      },
      //看板列表
      getLampDashboard: async function (data) {
        const res = await lampDashboard(data)
        if (res.code == 200) {
          this.lampDashboardList = res.data.listData.records
        }
      },
      //切换分组清楚定时器
      clearTimer(){
        clearInterval(this.timer)
      },
      loop(groupId) {
        const timer = 10000
        const data = {groupId}
        this.getLampDashboard(data)
        this.timer = setInterval(() => {
          this.getLampDashboard(data)
        }, timer)
        this.$on('hook:beforeDestroy', () => {
          clearInterval(this.timer)
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  .analysis{
    padding: 20px;
    background-color:#000 ;
    overflow-y: auto;
    height: 100%;
    .top{
      height: 56px;
      margin-bottom: 20px;
    }
    .boardContainer{
      border: 1px solid rgba(58,200,243,.8);
      height: calc(100% - 76px);
      padding: 5px 0 0 20px;
    }
  }
</style>